});
},
+ reset : function() {
+ return this.each(function() {
+ var $this = $(this);
+ if ($this.data('transfo')) {
+ _reset($this);
+ }
+ });
+ },
+
settings : function() {
if(this.length > 1) {
this.map(function () {
function _init ($this, settings) {
var transfo = {};
$this.data('transfo', transfo);
+ transfo.settings = settings;
// generate all the controls markup
var css = "box-sizing: border-box; position: absolute; background-color: #fff; border: 1px solid #ccc; width: 8px; height: 8px; margin-left: -4px; margin-top: -4px;";
transfo.$markup = $(''
+ '<div class="transfo-controls">'
- + '<div style="cursor: crosshair; position: absolute; margin: -18px; top: -12px; right: -12px; padding: 1px 0 0 1px;" class="transfo-rotator">'
+ + '<div style="cursor: crosshair; position: absolute; margin: -30px; top: 0; right: 0; padding: 1px 0 0 1px;" class="transfo-rotator">'
+ '<span class="fa-stack fa-lg">'
+ '<i class="fa fa-circle fa-stack-2x"></i>'
+ '<i class="fa fa-repeat fa-stack-1x fa-inverse"></i>'
else if (event.pageY < center.top && event.pageX < center.left) ang += 360;
ang -= dang;
+ if (settings.scaley < 0 && settings.scalex < 0) ang += 180;
if (!event.ctrlKey) {
settings.angle = Math.round(ang / transfo.settings.rotationStep) * transfo.settings.rotationStep;
if (transfo.active.type.indexOf("r") != -1) {
settings.scalex = - dx / (settings.width/2);
}
- if (settings.scaley < 0.05) settings.scaley = 0.05;
- if (settings.scalex < 0.05) settings.scalex = 0.05;
+ if (settings.scaley > 0 && settings.scaley < 0.05) settings.scaley = 0.05;
+ if (settings.scalex > 0 && settings.scalex < 0.05) settings.scalex = 0.05;
+ if (settings.scaley < 0 && settings.scaley > -0.05) settings.scaley = -0.05;
+ if (settings.scalex < 0 && settings.scalex > -0.05) settings.scalex = -0.05;
+
if (event.shiftKey &&
(transfo.active.type === "tl" || transfo.active.type === "bl" ||
transfo.active.type === "tr" || transfo.active.type === "br")) {
trans = true;
transform += " translateY("+settings.translatey+"px) ";
}
- if (settings.scalex != 1 && settings.scalex > 0) {
+ if (settings.scalex != 1) {
trans = true;
transform += " scaleX("+settings.scalex+") ";
}
- if (settings.scaley != 1 && settings.scaley > 0){
+ if (settings.scaley != 1){
trans = true;
transform += " scaleY("+settings.scaley+") ";
}
var settings = Object.create(transfo.settings);
var w = parseFloat(transfo.settings.css.width);
var h = parseFloat(transfo.settings.css.height);
- var width = settings.scalex * w;
- var height = settings.scaley * h;
- var top = settings.pos.top + (1-settings.scaley) * h / 2;
- var left = settings.pos.left + (1-settings.scalex) * w / 2;
+ var width = Math.abs(settings.scalex) * w;
+ var height = Math.abs(settings.scaley) * h;
+ var top = settings.pos.top + (1-Math.abs(settings.scaley)) * h / 2;
+ var left = settings.pos.left + (1-Math.abs(settings.scalex)) * w / 2;
+
+ var $rot = transfo.$markup.find(".transfo-rotator");
+ if (settings.scalex > 0) $rot.css({"right": "0px", "left": "auto"});
+ else $rot.css({"right": "auto", "left": "0px"});
+ if (settings.scaley > 0) $rot.css({"top": "0px", "bottom": "auto"});
+ else $rot.css({"top": "auto", "bottom": "0px"});
settings.scalex = settings.scaley = 1;
}
function _destroy ($this) {
- var transfo = $this.data('transfo');
- _setCss($this, transfo.settings.style, transfo.settings);
- $this.insertAfter(transfo.$wrap);
- transfo.$markup.remove();
+ $this.data('transfo').$markup.remove();
$this.removeData('transfo');
}
+ function _reset ($this) {
+ var transfo = $this.data('transfo');
+ _destroy($this);
+ $this.transfo(transfo.settings);
+ }
+
})(jQuery);
if (current === $link_button[0] || $(current).parent()[0] === $link_button[0]) {
return;
}
+ $link_button.hide();
previous = null;
});
}
},
save: function () {
this.close();
+ this.trigger("saved");
},
cancel: function () {
},
return this._super();
},
save: function () {
+ var self = this;
+ var $el = $(self.media.$);
+ setTimeout(function () {
+ $el.trigger("saved", self.media.$);
+ },0);
+
this.media.$.innerHTML = "";
if (this.active !== this.imageDialog) {
this.imageDialog.clear();
if (this.active !== this.videoDialog) {
this.videoDialog.clear();
}
+
this.active.save();
this.media.$.className = this.media.$.className.replace(/\s+/g, ' ');
- return this._super();
+ this._super();
},
searchTimer: null,
search: function () {
* all the new ones if necessary.
*/
save: function () {
+ var style = this.media.$.attributes.style ? this.media.$.attributes.style.textContent : '';
var classes = (this.media.$.className||"").split(/\s+/);
var non_fa_classes = _.reject(classes, function (cls) {
return cls === 'fa' || /^fa-/.test(cls);
var final_classes = non_fa_classes.concat(this.get_fa_classes());
this.media.$.className = final_classes.join(' ');
this.media.renameNode("span");
+ this.media.$.attributes.style.textContent = style;
this._super();
},
/**
.attr('data-size', size)
.addClass(size)
.addClass(no_sizes);
- if ((size && _.contains(classes, size)) || (!size && !selected)) {
+ if ((size && _.contains(classes, size)) || !selected) {
this.$preview.append($p.clone());
+ this.$('#fa-size').val(size);
$p.addClass('font-icons-selected');
selected = true;
}
save: function () {
var 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 = $(
- '<div class="media_iframe_video" data-src="'+this.get_url()+'">'+
+ '<div class="media_iframe_video" data-src="'+this.get_url()+'" style="'+style+'">'+
'<div class="css_editable_mode_display"> </div>'+
'<iframe src="'+this.get_url()+'" frameborder="0" allowfullscreen="allowfullscreen"></iframe>'+
'</div>');
- $iframe.attr("style", this.$(this.media.$).attr("style"));
$(this.media.$).replaceWith($iframe);
this._super();
},
this._super();
this.$el.find(".clear-style").click(function (event) {
- self.$target.removeClass("fa-spin").attr("style", null);
- self.$target.transfo({ hide: true });
+ self.$target.removeClass("fa-spin").attr("style", "");
+ self.resetTransfo();
});
+ this.$el.find(".style").click(function (event) {
+ var settings = self.$target.data("transfo").settings;
+ self.$target.transfo({ hide: (settings.hide = !settings.hide) });
+ });
+
+ this.$overlay.find('.oe_snippet_clone, .oe_handles').addClass('hidden');
+
+ this.$overlay.find('[data-toggle="dropdown"]')
+ .on("mousedown", function () {
+ self.$target.transfo({ hide: true });
+ });
+ },
+ resetTransfo: function () {
+ var self = this;
+ this.$target.transfo("destroy");
this.$target.transfo({
hide: true,
callback: function () {
self.$target.trigger("mouseover");
})
.mouseover();
-
- this.$el.find(".style").click(function (event) {
- var settings = self.$target.data("transfo").settings;
- self.$target.transfo({ hide: (settings.hide = !settings.hide) });
- });
-
- this.$overlay.find('.oe_snippet_clone, .oe_handles').addClass('hidden');
-
- this.$overlay.find('[data-toggle="dropdown"]')
- .on("mousedown", function () {
- self.$target.transfo({ hide: true });
- });
},
onFocus : function () {
- this.$target.transfo({ hide: true });
+ this.resetTransfo();
},
onBlur : function () {
this.$target.transfo({ hide: true });
website.snippet.start_animation(true, this.$target);
+ this.$target.on("saved", self, function (event, item) {
+ self.BuildingBlock.make_active($(item));
+ });
+
this.$el.find(".edition").click(function (event) {
event.preventDefault();
event.stopPropagation();
<button type="button" class="btn hidden wait" disabled="disabled">Uploading...</button>
</div>
<span class="text-muted">— or —</span>
- <label for="iamgeurl">Image URL</label>
+ <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 class="well">
<div class="form-group btn-group">
<span class="text-muted pull-right" style="margin-left:10px; line-height: 2em;">(Youtube, Vimeo, Dailymotion)</span>
- <label for="urlvideo" style="width: 180px; line-height: 2em;" class="pull-left">Video URL</label>
+ <label for="urlvideo" style="width: 180px; line-height: 2em;" class="pull-left">Set a video URL</label>
<input type="text"
name="url"
class="form-control url pull-left"
<button class="btn btn-primary">Add</button>
</div>
<div class="form-group btn-group">
- <label for="urlvideo" style="width: 180px; line-height: 2em;" class="pull-left">Html Embed Video</label>
+ <label for="urlvideo" style="width: 180px; line-height: 2em;" class="pull-left"><span class="text-muted">— or —</span> Embed Video (HTML)</label>
<input type="text"
name="embed"
class="form-control url pull-left"
<div data-snippet-option-id='transform'
data-selector="img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa">
<li><a href="#" class="style">Transform</a></li>
- <li class="dropdown-submenu">
- <a href="#" tabindex="-1">Rotation</a>
- <ul class="dropdown-menu">
- <li data-value="fa-flip-horizontal"><a>Horizontal flip</a></li>
- <li data-value="fa-flip-vertical"><a>Vertical flip</a></li>
- <li data-value="fa-spin"><a>Spin</a></li>
- </ul>
- </li>
+ <li data-value="fa-spin"><a>Spin</a></li>
<li><a href="#" class="clear-style">Clear Style</a></li>
</div>