I'm using the accordion component of uikit and I'm trying to extend the plugin ... this is what I wrote
UIkit.on('beforeready.uk.dom', function () {
$.extend(UIkit.components.accordion.prototype, {
init: function () {
}
});
and this is the init code that is changing:
init: function() {
var $this = this;
this.element.on('click.uikit.accordion', this.options.toggle, function(e) {
e.preventDefault();
$this.toggleItem(UI.$(this).data('wrapper'), $this.options.animate, $this.options.collapse);
});
this.update();
if (this.options.showfirst) {
this.toggleItem(this.toggle.eq(0).data('wrapper'), false, false);
}
},
as you can see with this code I can override the init function ...however I want to keep the existing init function and add some code in it....is it possible to do so?
Thanks in advance
Related
I'm trying to Create Snippets in odoo 10 according to https://www.odoo.com/documentation/10.0/howtos/themes.html#create-snippets
I created the snippets and add the js option, the code from the example
(function() {
'use strict';
var website = odoo.website;
website.odoo_website = {};
website.snippet.options.snippet_testimonial_options = website.snippet.Option.extend({
on_focus: function() {
alert("On focus!");
}
})
})();
fails since odoo.website is not defined see
Please help
here is the correct code for /theme_tst/static/src/js/tutorial_editor.js
odoo.define('snippet_testimonial_options', function(require) {
'use strict';
var options = require('web_editor.snippets.options');
options.registry.snippet_testimonial_options = options.Class.extend({
on_focus: function() {
alert("On focus!")
},
});
});
for odoo11: I need to change on_focus to onFocus (didn't try on odoo10)
odoo.define('snippet_testimonial_options', function(require) {
'use strict';
var options = require('web_editor.snippets.options');
options.registry.snippet_testimonial_options = options.Class.extend({
onFocus: function() {
alert("On focus!")
},
});
});
sombatsombat answer works for me. In odoo 12 onFocus is used. List of events are given on this link.
Also first argument snippet_testimonial_options is optional. we can simply ignore it.
odoo.define(function (require) {
var options = require('web_editor.snippets.options');
console.log(options);
options.registry.snippet_testimonial_options = options.Class.extend({
onFocus: function () {
alert("On focus!")
},
});
});
I am using dropzone.js for my project.
Is it possible to use or to call two(2) "init: function" there?
Thanks for helping .
I have this
Dropzone.options.filedrop = {
maxFilesize: 4096,
init: function () {
this.on("complete", function (file) {
doSomething();
});
}
};
Sure, you can do it like this:
Dropzone.options.filedrop = {
maxFilesize: 4096,
init: function () {
this.on("complete", function (file) {
doSomething();
}),
this.on('sending', function () {
doSomethingElse();
})
}
};
I'm having difficulty testing that Reflux actions are triggering correctly in my application, and in fact they do not seem to be working at all with Jest. I have this example test:
jest.autoMockOff();
describe('Test', function () {
it('Tests actions', function () {
var Reflux = require('../node_modules/reflux/index');
var action = Reflux.createAction('action');
var mockFn = jest.genMockFn();
var store = Reflux.createStore({
init: function () {
this.listenTo(action, this.onAction);
},
onAction: function () {
mockFn();
}
});
action('Hello World');
expect(mockFn).toBeCalled();
});
});
Which outputs:
● Test › it Tests actions
- Expected Function to be called.
at Spec.<anonymous> (__tests__/Test.js:20:20)
at Timer.listOnTimeout [as ontimeout] (timers.js:112:15)
Even with Jasmine async functions it doesn't seem to be working
jest.autoMockOff();
describe('Test', function () {
it('Tests actions', function () {
var Reflux = require('../node_modules/reflux/index');
var action = Reflux.createAction('action');
var mockFn = jest.genMockFn();
var flag = false;
var store = Reflux.createStore({
init: function () {
this.listenTo(action, this.onAction);
},
onAction: function () {
mockFn();
flag = true;
}
});
runs(function () {
action();
});
waitsFor(function () {
return flag;
}, 'The action should be triggered.', 5000);
runs(function () {
expect(mockFn).toBeCalled();
});
});
});
gives me...
FAIL __tests__/Test.js (6.08s)
● Test › it Tests actions
- Throws: [object Object]
Has anybody made this work?
I figured it out! I just needed to use Jest's own methods for fast-forwarding any timers. i.e. just add the line
jest.runAllTimers();
So the working version of my first example would be
jest.autoMockOff();
describe('Test', function () {
it('Tests actions', function () {
var Reflux = require('../node_modules/reflux/index');
var action = Reflux.createAction('action');
var mockFn = jest.genMockFn();
var store = Reflux.createStore({
init: function () {
this.listenTo(action, this.onAction);
},
onAction: function () {
mockFn();
}
});
action('Hello World');
jest.runAllTimers();
expect(mockFn).toBeCalled();
});
});
I've got problem with my controller
Ext.define('app.controller.myController', {
init: function() {
this.control({
'#myinputfield': {
change: this.textFieldChange(parameter)
}
})
},
textFieldChange: function(parameter) {
//do something
}
});
its look like this
the problem is when i give parameter here
change: this.textFieldChange(parameter)
then its fire up after site load and I don't know why.
without parameter its waiting for change event like it should
can any1 help me please ?
It is because:
change: this.textFieldChange here you are giving the reference for this function to this property
change: this.textFieldChange(parameter) here you are giving the result of the function to this property (which if we don't use return, then it will be undefined).
You can use the eOpts variable in the function definition, for custom parameter sending, see in Example:
Ext.define('app.controller.myController', {
init: function() {
this.control({
'#myinputfield': {
change: {
fn : this.textFieldChange,
params : {
param1: 'something'
}
}
}
})
},
textFieldChange: function(textfield, newValue, oldValue, eOpts) {
var params = eOpts.params;
console.log(params.param1);
//do something
}
});
ok so im having a hard time hiding some layout sections (divs in my layout page and im using mvc3).
I have this js fragment which is basically the main logic:
$('.contentExpand').bind('click', function () {
$.cookie('right_container_visible', "false");
});
//Cookies Functions========================================================
//Cookie for showing the right container
if ($.cookie('right_container_visible') === 'false') {
if ($('#RightContainer:visible')) {
$('#RightContainer').hide();
}
$.cookie('right_container_visible', null);
} else {
if ($('#RightContainer:hidden')) {
$('#RightContainer').show();
}
}
as you can see, im hidding the container whenever i click into some links that have a specific css. This seems to work fine for simple tests. But when i start testing it like
.contentExpand click --> detail button click --> .contentExpand click --> [here unexpected issue: the line $.cookie('right_container_visible', null); is read but it doesnt set the vaule to null as if its ignoring it]
Im trying to understand whats the right logic to implement this. Anyone knows how i can solve this?
The simpliest solution is to create variable outside delegate of bind.
For example:
var rightContVisibility = $.cookie('right_container_visible');
$('.contentExpand').bind('click', function () {
$.cookie('right_container_visible', "false");
rightContVisibility = "false";
});
if (rightContVisibility === 'false') {
...
}
The best thing that worked for me was to create an event that can catch the resize of an element. I got this from another post but I dont remember which one. Anyway here is the code for the event:
//Event to catch rezising============================================================================
(function () {
var interval;
jQuery.event.special.contentchange = {
setup: function () {
var self = this,
$this = $(this),
$originalContent = $this.text();
interval = setInterval(function () {
if ($originalContent != $this.text()) {
$originalContent = $this.text();
jQuery.event.handle.call(self, { type: 'contentchange' });
}
}, 100);
},
teardown: function () {
clearInterval(interval);
}
};
})();
//=========================================================================================
//Function to resize the right container============================================================
(function ($) {
$.fn.fixRightContainer = function () {
this.each(function () {
var width = $(this).width();
var parentWidth = $(this).offsetParent().width();
var percent = Math.round(100 * width / parentWidth);
if (percent > 62) {
$('#RightContainer').remove();
}
});
};
})(jQuery);
//===================================================================================================