Develop Reference

Make field invisible via js code - ODOO 9

I'm looking for a method which makes a field invisible on js (i'm making a custom widget 'InvisibleIfEmptry').
I tried to override _check_visibility method when extending FormWidget.AbstractField class :
var core = require('web.core'),
form_common = require('web.form_common');
var InvisibleIfEmpty = form_common.AbstractField.extend({
start: function() {
this.on("change:effective_readonly", this, function() {
this._toggle_label();
this._check_visibility();
});
this.render_value();
this._toggle_label();
},
_check_visibility: function() {
if (this.get("effective_readonly"))
this.$el.toggleClass('o_form_invisible',true);
}
this.$el.toggleClass('o_form_invisible',false);
}
}, .....
but this makes invisible only the field's value, not the label.
my guess is to alter some of field_manager's values but i can't figure out which one ?
Thank you for your help :)

Here is my JS code for doing that :
odoo.define('myCustomModule', function(require)
{
'use strict';
var core = require('web.core'),
form_common = require('web.form_common'),
form_view = require('web.FormView');
form_common.AbstractField.include({
start: function() {
this._super();
// Check visibility logic below when content
// changes or the form swich to view mode
this.field_manager.on("view_content_has_changed", this, function() {
this._check_visibility();
});
this.on("change:effective_readonly", this, function() {
this._toggle_label();
this._check_visibility();
});
},
_check_visibility: function() {
// If the form is in view mode and the field is empty,
// make the field invisible
window.alert(this.);
if (this.field_manager.get("actual_mode") === "view" ) {
if(this.get("value") == false){
this.$el.toggleClass('o_form_invisible',true);
this.$label.toggleClass('o_form_invisible',true);
}else{
this.$el.toggleClass('o_form_invisible',this.get("effective_invisible"));
this.$label.toggleClass('o_form_invisible',this.get("effective_invisible"));
}
}else{
this.$el.toggleClass('o_form_invisible',this.get("effective_invisible"));
this.$label.toggleClass('o_form_invisible',this.get("effective_invisible"));
}
},
});
});
But this applies to all my modules.
Does Any one know how to get module/model name from AbstractField ?

Adding a custom context menu item to elFinder

I'm using elfinder and I would like to add new functionality by adding a command to the context menu. I found a solution on the github issue tracker of the project but I can't get it to work. Here's what I do:
var elf;
jQuery().ready(function() {
elFinder.prototype._options.commands.push('editimage');
elFinder.prototype._options.contextmenu.files.push('editimage');
elFinder.prototype.i18.en.messages['cmdeditimage'] = 'Edit Image';
elFinder.prototype.i18.de.messages['cmdeditimage'] = 'Bild bearbeiten';
elFinder.prototype.commands.editimage = function() {
this.exec = function(hashes) {
console.log('hallo');
}
}
elf = jQuery('#elfinder').elfinder({
...
//elfinder initialization
The context menu item does not show up, no error message is to be found in the console. I also tried putting editimage under contextmenu->"files" in the init part in case that was overwritten by the initialization.

I found the solution: The examples don't show the fact that you need to have a function called this.getstate inside of the elFinder.prototype.commands.yourcommand function. It shall return 0 when the icon is enabled and -1 when it's disabled.
So the full code for adding your own menu item or context menu item looks like this:
var elf;
jQuery().ready(function() {
elFinder.prototype.i18.en.messages['cmdeditimage'] = 'Edit Image';
elFinder.prototype.i18.de.messages['cmdeditimage'] = 'Bild bearbeiten';
elFinder.prototype._options.commands.push('editimage');
elFinder.prototype.commands.editimage = function() {
this.exec = function(hashes) {
//do whatever
}
this.getstate = function() {
//return 0 to enable, -1 to disable icon access
return 0;
}
}
...
elf = jQuery('#elfinder').elfinder({
lang: 'de', // language (OPTIONAL)
url : '/ext/elfinder-2.0-rc1/php/connector.php', //connector URL
width:'100%',
uiOptions : {
// toolbar configuration
toolbar : [
...
['quicklook', 'editimage'],
/*['copy', 'cut', 'paste'],*/
...
]},
contextmenu : {
...
// current directory file menu
files : [
'getfile', '|','open', 'quicklook', 'editimage', ...
]
}
}).elfinder('instance');
});
Hope this helps someone with the same problem.

Thanks for the answer, great!
One thing that wasn't clear was how the variables pass through.
So, for anyone else who finds this page....
elFinder.prototype.commands.editpres = function() {
this.exec = function(hashes) {
var file = this.files(hashes);
var hash = file[0].hash;
var fm = this.fm;
var url = fm.url(hash);
var scope = angular.element("body").scope();
scope.openEditorEdit(url);
}
// Getstate configured to only light up button if a file is selected.
this.getstate = function() {
var sel = this.files(sel),
cnt = sel.length;
return !this._disabled && cnt ? 0 : -1;
}
}
To get your icon to show up, add the following to your css file:
.elfinder-button-icon-editpres { background:url('../img/icons/editpres.png') no-repeat; }

Enabling History API with datatables

I have a dataTable object on a page representing a list of releases I need to keep track of with the url /releases I want to add the following functionality
if /releases?query=<query>, the dataTable will initialized with the provided query
The query parameter is updated if the user changes the search term
The back and forward buttons in the browser go the appropriate query
So far I am able to do the first 2, but when I listen for the popstate event, redrawing the table triggers a pushState which I can't figure out how to prevent. Here's my code so far:
$(document).ready(function(){
var prevSearch;
var table = $('#releases').dataTable({
"bJQueryUI" : true,
"sPaginationType" : "full_numbers",
"iDisplayLength" : 50,
"oSearch": {"sSearch": '#{params[:query]}'},
"fnDrawCallback": function(oSettings) {
var curSearch = oSettings.oPreviousSearch.sSearch;
if (!prevSearch) {
prevSearch = curSearch;
} else if (curSearch != prevSearch) {
console.log("changed to: " + curSearch);
history.pushState({query: curSearch}, "title", "releases?query=" + curSearch);
prevSearch = curSearch;
}
}
});
window.addEventListener("popstate", function(e) {
if (e.state) {
table.fnFilter(e.state.query);
}
});
});
Note, I am using a rails backend and this is inlined javascript being served in the page.

you have only 2 options here:
move pushState code out of drawCallback. There must be some other code that causes the datatables to draw when user enters something. put your pushState code there. This is the ideal solution
add a hack like this
$(document).ready(function () {
var prevSearch;
var saveState = true;
var table = $('#releases').dataTable({
"bJQueryUI":true,
"sPaginationType":"full_numbers",
"iDisplayLength":50,
"oSearch":{"sSearch":'#{params[:query]}'},
"fnDrawCallback":function (oSettings) {
var curSearch = oSettings.oPreviousSearch.sSearch;
if (!prevSearch) {
prevSearch = curSearch;
} else if (curSearch != prevSearch) {
console.log("changed to: " + curSearch);
if (saveState) {
history.pushState({query:curSearch}, "title", "releases?query=" + curSearch);
}
prevSearch = curSearch;
}
}
});
window.addEventListener("popstate", function (e) {
if (e.state) {
saveState = false;
table.fnFilter(e.state.query);
saveState = true;
}
});
});

CKEditor link dialog removing protocol

In my CKEditor I removed the 'linkType' and 'protocol' inputs of the link dialog.
CKEDITOR.on( 'dialogDefinition', function( ev )
{
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName == 'link' )
{
var infoTab = dialogDefinition.getContents( 'info' );
infoTab.remove( 'linkType' );
infoTab.remove( 'protocol' );
}
});
However, evertype I type in something like https://google.com as soon as I type in the 'g' the https:// gets removed.
I checked the output and it always says http:// disregarding the input.
How can I turn this stupid behaviour off?

After much research, debugging and tweaking, I've finally managed to pull this off!!!
Here's how I do it:
CKEDITOR.on('dialogDefinition', function(e) {
// NOTE: this is an instance of CKEDITOR.dialog.definitionObject
var dd = e.data.definition;
if (e.data.name === 'link') {
dd.minHeight = 30;
// remove the unwanted tabs
dd.removeContents('advanced');
dd.removeContents('target');
dd.removeContents('upload');
// remove all elements from the 'info' tab
var tabInfo = dd.getContents('info');
while (tabInfo.elements.length > 0) {
tabInfo.remove(tabInfo.elements[0].id);
}
// add a simple URL text field
tabInfo.add({
type : 'text',
id : 'urlNew',
label : 'URL',
setup : function(data) {
var value = '';
if (data.url) {
if (data.url.protocol) {
value += data.url.protocol;
}
if (data.url.url) {
value += data.url.url;
}
} else if (data.email && data.email.address) {
value = 'mailto:' + data.email.address;
}
this.setValue(value);
},
commit : function(data) {
data.url = { protocol: '', url: this.getValue() };
}
});
}
});

Here's how I removed the protocol in v4.5.1:
CKEDITOR.on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName === 'link') {
var infoTab = dialogDefinition.getContents('info');
infoTab.remove('protocol');
var url = infoTab.get('url');
url.onKeyUp = function(){};
url.setup = function(data) {
this.allowOnChange = false;
if (data.url) {
var value = '';
if (data.url.protocol) {
value += data.url.protocol;
}
if (data.url.url) {
value += data.url.url;
}
this.setValue(value);
}
this.allowOnChange = true;
};
url.commit = function(data) {
data.url = { protocol: '', url: this.getValue() };
};
}
});

I'm afraid there's no way to change it. You have to manually edit a few lines of the code to make it working your way.

I recently found a way to hide the Link Type so you don't have to remove it totally. Set the style to display: none like the following:
infoTab.get( 'linkType' ).style = 'display: none';
I think it works for the Protocol as well, but I haven't tested it. I answered the same question here
Hope this helps someone!

For the lazy people like me, just do a quick core file hack:
open plugins/link/dialogs/link.js
in the minimized version find d=/^(http|https|ftp|news):\/\/(?=.)/i.exec(b);
remove http|https|ftp|
save file, upload it to your server
If it does not work after reload, this might be a cache problem. Open browser in private mode, navigate to your ckeditor and try it again. Good luck.

javascript wrap text with tag

I am adding a button to tinyMCE and I want to know how to wrap text inside tags with javascript, for instance (this highlighted text gets wrapped inside [highlight][/highlight] tags).
and now the entire tinymce
(function() {
tinymce.create('tinymce.plugins.shoutButton', {
init : function(ed, url) {
ed.addButton('shout.button', {
title : 'shout.button',
image : 'viral.gif',
onclick : function() {
window.alert("booh");
});
},
createControl : function(n, cm) {
return null;
},
getInfo : function() {
return {
longname : "Shout button",
author : 'SAFAD',
authorurl : 'http://safadsoft.com/',
infourl : 'http://safadsoft.com/',
version : "1.0"
};
}
});
tinymce.PluginManager.add('shout.button', tinymce.plugins.ShoutButton);
})();

You can use the setSelectionRange (mozilla/webkit) or selection.createRange (IE) methods to find the currently highlighted text inside a textarea.
I put up an example on jsfiddle, but have commented out your regexp since it hangs the browser in many instances. You need to make it more restrictive, and it currently passes a lot of other things than youtube url's as well.
However, the example has a working solution how to get the currently selected text, which you can, after fixing your pattern, apply to the idPattern.exec().
idPattern = /(?:(?:[^v]+)+v.)?([^&=]{11})(?=&|$)/;
// var vidId = prompt("YouTube Video", "Enter the id or url for your video");
var vidId;
el = document.getElementById('texty');
if (el.setSelectionRange) {
var vidId = el.value.substring(el.selectionStart,el.selectionEnd);
}
else if(document.selection.createRange()) {
var vidId = document.selection.createRange().text;
}
alert(vidId);
EDIT: Wrapping the highlighted text and outputting it back to the element. example
el = document.getElementById('texty');
if (el.setSelectionRange) {
el.value = el.value.substring(0,el.selectionStart) + "[highlight]" + el.value.substring(el.selectionStart,el.selectionEnd) + "[/highlight]" + el.value.substring(el.selectionEnd,el.value.length);
}
else if(document.selection.createRange()) {
document.selection.createRange().text = "[highlight]" + document.selection.createRange().text + "[/highlight]";
}

The issue was syntax errors, not properly closed brackets and some missing semi-colons, using the help of the awesome Jsfiddle's JSHint and JSLint I fixed it :
(function () {
tinymce.create('tinymce.plugins.shoutButton', {
init: function (ed, url) {
ed.addButton('shout.button', {
title: 'shout.button',
image: 'viral.gif',
onclick: function () {
window.alert("booh");
}
});
createControl: function (n, cm) {
return null;
}
getInfo: function () {
return {
longname: "Shout button",
author: 'You !',
authorurl: 'http://example.com/',
infourl: 'http://example.com/',
version: "1.0"
};
}
}
});
tinymce.PluginManager.add('shout.button', tinymce.plugins.ShoutButton);
})();
Best Regards